<template>
  <div>
    <div class="title">
      <div>elementUI封装的表格，可进一步修改</div>
      <div>vue + element-ui</div>
    </div>
    <div class="grid">
      <grid :column="column" :page="page" :data="data"></grid>
    </div>
  </div>
</template>
<script>
import grid from './grid'
export default {
  components: { grid },
  data () {
    return {
      data: [
        {
          name: 'a',
          id: '1',
          b: 'b',
          c: 'c',
          d: 'd',
          e: 'e'
        },
        {
          name: 'a',
          id: '2',
          b: 'b',
          c: 'c',
          d: 'd',
          e: 'e'
        },
        {
          name: 'a',
          id: '3',
          b: 'b',
          c: 'c',
          d: 'd',
          e: 'e'
        }
      ],
      page: {
        pageSizes: [20, 50, 100],
        total: 1,
        currentPage: 1,
        pageSize:20
      },
      column: [
        {
          label:"名称",
          prop: 'name'
        },
        {
          label: "bb",
          prop: 'b',
        },
        {
          label: "c",
          prop: 'c',
        },
        {
          label: "d",
          prop: 'd',
        },
        {
          label: "e",
          prop: 'e',
        }
      ]
    }
  },

}
</script>

<style scoped>
.title{
  text-align: center;
  margin-bottom: 20px;
}
</style>
